import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { Container } from '@mui/material';
import HomePage from './components/home/HomePage';
import RoomPage from './components/room/RoomPage';
import ErrorPage from './components/common/ErrorPage';
import Header from './components/common/Header';
import { isWebRTCSupported } from './utils/helpers';

const App: React.FC = () => {
  // 检查浏览器是否支持 WebRTC
  if (!isWebRTCSupported()) {
    return (
      <Container maxWidth="md" sx={{ mt: 4 }}>
        <ErrorPage 
          title="浏览器不支持"
          message="您的浏览器不支持 WebRTC 技术，请使用最新版本的 Chrome、Firefox 或 Safari 浏览器。"
          showRetry={false}
        />
      </Container>
    );
  }

  return (
    <div className="app">
      <Header />
      <main style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <Routes>
          {/* 首页 - 创建或加入房间 */}
          <Route path="/" element={<HomePage />} />
          
          {/* 房间页面 - 视频通话 */}
          <Route path="/room/:roomId" element={<RoomPage />} />
          
          {/* 错误页面 */}
          <Route path="/error" element={<ErrorPage />} />
          
          {/* 404 重定向到首页 */}
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </main>
    </div>
  );
};

export default App;